<template lang="html">
  <div class="yuyueOrderBox" v-loading.body="loading">
    <div class="bzBox">
      <el-steps :center="true" :align-center="true" :active="statusType" finish-status="success">
        <el-step :title="item.aliasName" v-for="item in status" :description="item.orderTime | getDate"></el-step>
      </el-steps>
    </div>
    <el-row style="margin:10px 0;">
      <el-col :span="12" style="border-right:1px solid #EEEEEE;">
        <ul class="contentList1">
          <li>订单号：{{orderInfo.orderNo}}</li>
          <li>产品类型：{{productInfo.productTypeName}}</li>
          <li>支付方式：{{orderInfo.payType}}</li>
          <li>客户信息：{{customerInfo.name}}（{{customerInfo.phone}}）</li>
        </ul>
      </el-col>
      <el-col :span="10" style="text-align:left; padding-left:10px;">
          <span style="font-size:12px; padding-top:5px;">订单状态：{{orderInfo.orderStatus}}</span>
      </el-col>
    </el-row>

    <el-row style="background:#F6F6F6; padding:5px;">
      <el-col :span="12" class="text-left">产品名</el-col>
      <el-col :span="2" class="text-left">单价</el-col>
      <el-col :span="2" class="text-left">数量</el-col>
      <el-col :span="3" class="text-left">优惠(元)</el-col>
      <el-col :span="3" class="text-left">实付(元)</el-col>
      <el-col :span="2" class="text-left">状态</el-col>
    </el-row>
    <el-row class="sucList1">
      <el-col :span="12" class="text-left">
        <p style="width:90%;">{{productInfo.productName}}</p>
        <p class="gray" style="width:90%;">{{productInfo.productAliasName}}</p>
      </el-col>
      <el-col :span="2" class="text-left">
        <p>{{productInfo.productPrice/100}}</p>
      </el-col>
      <el-col :span="2" class="text-left"><p>x{{orderInfo.orderNum}}</p></el-col>
      <el-col :span="3" class="text-left"><p>-</p></el-col>
      <el-col :span="3" class="text-left"><p>{{orderInfo.payPrice/100}}</p></el-col>
      <el-col :span="2" class="text-left"><p>{{productInfo.productStatus}}</p></el-col>
    </el-row>
    <el-row class="sucList2">
        <el-col :span="12" class="text-left" >
          <span class="text-small">有赞备注</span>
        </el-col>
        <el-col :span="12" class="text-left" style="border-left:1px solid #eee;">
          <ul class="contentList2">
            <li>您的姓名：{{customerInfo.name}}</li>
            <li>手机号：{{customerInfo.phone}}</li>
            <li v-if="preType==0">预约到店：
              <el-select v-model="value" size="mini" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.startTime+','+item.title | getDate3  "
                  :value="item.id">
                </el-option>
              </el-select>
            </li>
            <li style="margin-top:5px;" v-if="preType==1">房间数量：
              <el-select v-model="room" @change="roomChange" size="mini" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.value"
                  :value="item.count">
                </el-option>
              </el-select>
            </li>
            <li style="margin-top:5px;" v-if="preType==1">入住日期：
              <el-select v-model="value" multiple :multipleLimit='orderInfo.orderNum/room'  size="mini" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.startTime | getDate2"
                  :value="item.id">
                </el-option>
              </el-select>
            </li>
            <li class="text-right">
              <el-button size="small" type="success" @click="sub">提交</el-button>
            </li>
          </ul>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  data(){
    return {
      value:[],
      loading:false,
      room:'',
      options:[],
      orderInfo:{},
      productInfo:{},
      customerInfo:{},
      status:[],
      statusType:2,
      userInfo:{},
      preType:0,
      options2:[]
    }
  },
  methods:{
    sub:function (){
      var that = this;

      that.loading=true;
      var arr=[];
      if(this.preType==0){
        arr=[{'count':this.orderInfo.orderNum,'productReservationId':this.value}]
      }else if(this.preType==1){
        for(let i in this.value){
          var json={};
          json.count=this.room;
          json.productReservationId=this.value[i];
          arr.push(json);
        }
      }
      axios.get(url+'/v1/orders/reservation/order',{
        params:{
          orderId:this.$store.state.TanGoods.id,
          reservations:JSON.stringify(arr)
        }
      }).then((res)=>{
        if(res.data.code==0){
          that.loading=false;
          this.$store.dispatch('closeDialog','TanGoods');
          this.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
          var json1={
            'orderNo':'',
            'orderTime':'',
            'otaPlatform':'',
            'pageCount':10,
            'pageIndex':1,
            'productName':'',
            'sort':'',
            'status':'',
            'type':1,
            'appointmentStatus':0,
            'userName':'',
            'userPhone':''
          };
          this.$store.dispatch('showLoading','TanGoods');
          this.$store.dispatch('getAllGoodsList',json1);
        }else{
          this.$store.dispatch('closeDialog','TanGoods');
          that.loading=false;
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch((err)=>{
        that.loading=false;
        this.$message({
          showClose: true,
          message: '错误:'+err,
          type: 'error'
        });
      })
      this.$store.dispatch('closeDialog','TanGoods');
    },
    roomChange:function (){
      this.value=[];
    },
    getMessage:function (){
      axios.get(url+'/v1/orders/get/order/detail',{
        params:{
          orderId:this.$store.state.TanGoods.id,
          type:1
        }
      }).then((res)=>{
        var data=res.data.data;
        this.orderInfo=data.orderInfo;
        this.productInfo=data.productInfo;
        this.customerInfo=data.customerInfo;
        this.status=data.status;
        this.userInfo=data.userInfo;
        this.preType=data.extInfo.type;
        for(let i in data.status){  //获取步骤进度
          if(data.status[i].orderTime==''){
            this.statusType=parseInt(i);
            break;
          }
        }
        if(data.extInfo.type==1){   //获取房间数选项
          this.options2=[];
          for(let i=1;i<=parseInt(data.orderInfo.orderNum);i++){
            var json={'value':i+"间",'count':i};
            this.options2.push(json);
          }
        }
        this.getOptions();
      }).catch((err)=>{
        console.log(err);
      })
    },
    getOptions:function (){
      axios.get(url+'/v1/orders/get/reservation/useful',{
        params:{
          productId:this.productInfo.productId,
          skuId:this.orderInfo.skuId
        }
      }).then((res)=>{
        console.log(res.data);
        this.options=res.data.data;
      }).catch((err)=>{
        console.log(err);
      })
    }
  },
  filters:{
    getDate:function (val){
      if(val==''){
        return '';
      }
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return year+"-"+month+"-"+day+" "+hours+":"+minutes;
    },
    getDate2:function (val){
      if(val==''){
        return '';
      }
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      var week=date.getDay(),str;
      if (week == 0) {
        str = "周日";
      } else if (week == 1) {
        str = "周一";
      } else if (week == 2) {
        str = "周二";
      } else if (week == 3) {
        str = "周三";
      } else if (week == 4) {
        str = "周四";
      } else if (week == 5) {
        str = "周五";
      } else if (week == 6) {
        str = "周六";
      }
      return year+"年"+month+"月"+day+"日 "+str;
    },
    getDate3:function (val){
      if(val==''){
        return '';
      }
      try{
        var mArr = val.split(',');
        var mval = mArr[0];
        var date=new Date();
        date.setTime(mval);
        var year = date.getFullYear();
        var month= date.getMonth()+1;
        if(month<10){
          month='0'+month;
        }
        var day=date.getDate();
        if(day<10){
          day='0'+day;
        }
        var week=date.getDay(),str;
        if (week == 0) {
          str = "周日";
        } else if (week == 1) {
          str = "周一";
        } else if (week == 2) {
          str = "周二";
        } else if (week == 3) {
          str = "周三";
        } else if (week == 4) {
          str = "周四";
        } else if (week == 5) {
          str = "周五";
        } else if (week == 6) {
          str = "周六";
        }
        return year+"年"+month+"月"+day+"日 "+str+mArr[1];
      }catch(err){
        return '';
      }
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanGoods.id;
    }
  },
  watch:{
    getId(val){
      this.getMessage();
    }
  },
  created(){
    url = this.$store.state.url;
    this.getMessage();
  }
}
</script>

<style lang="Sass" >
.yuyueOrderBox{
  .bzBox{padding: 30px 20px 10px 20px; border: 1px solid #13CE66; background: #EFF7F3; border-radius: 5px;}
  .contentList1{list-style: none; padding: 5px 0;
    li{font-size: 12px; text-align: left;}
  }
  .contentList2{list-style: none; padding-left: 10px;
    li{ line-height: 22px; font-size: 12px;
      span{ font-size: 12px;}
      .date{display: inline; width: 120px;
        .el-input__inner{display: inline; width: 120px;}
      }
    }
  }
  .sucList1{ margin-top: 10px;
    p{font-size: 12px;}
  }
  .sucList2{ margin-top: 10px; border-top: 1px dashed #95989A; padding-top: 10px; position: relative;
    p{font-size: 12px;}
  }
  .el-step__main{margin-top: -60px;}
  .el-step__description{margin-top: 35px; width: 70px; text-align: center;}
}
</style>
